<template>
  <div id="show"
       v-loading="loading"
       element-loading-text="加载中..."
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <header>
      <div class="left">
        <el-button type="primary"
                   size="medium"
                   icon="el-icon-plus"
                   @click="$router.push('basic')"
                   style="padding: 10px 12px;">新增</el-button>
        <el-input size="medium"
                  placeholder="关键字"
                  style="margin:0 5px;"
                  v-model="searchText"></el-input>

        <!-- <el-button icon="el-icon-search"
                   style="padding: 10px 12px;"
                   size="medium">搜索</el-button> -->
        <el-button-group style="display:flex">
          <el-button icon="el-icon-search"
                     style="padding: 10px 12px;"
                     size="medium"
                     @click="loadData">搜索</el-button>
          <!-- <el-button icon="el-icon-arrow-down"
                     style="padding: 10px 12px;"
                     size="medium"></el-button> -->
        </el-button-group>
      </div>
      <el-button-group>
        <el-button icon="el-icon-document"
                   size="medium"
                   @click="handleTemplateDownload"
                   style="padding: 10px 12px;">模板下载</el-button>
        <el-button icon="el-icon-edit"
                   style="padding: 10px 12px;"
                   @click="handleImportClick"
                   size="medium">导入</el-button>
        <el-button icon="el-icon-download"
                   style="padding: 10px 12px;"
                   @click="handleExportClick"
                   size="medium">导出</el-button>
        <input ref="file"
               @change="handleFileChange"
               type="file"
               style="display:none">
      </el-button-group>
      <batchTag :number="selections.length"
                @delete="handleDelete"></batchTag>
    </header>
    <main>
      <el-table :data="tableData"
                header-cell-class-name="table-header"
                border
                @sort-change="handleSort"
                @selection-change="handleSelectionChange"
                style="width: 100%">
        <el-table-column type="selection"
                         align="center"
                         width="55"></el-table-column>
        <!-- <el-table-column type="index"
                         align="center"
                         label="序号"
                         width="80">
        </el-table-column> -->
        <el-table-column type="index"
                         label="序号"
                         width="50"
                         align="center"
                         :index="computeTableIndex" />
        <el-table-column prop="name"
                         align="center"
                         sortable="custom"
                         label="演出名称">
        </el-table-column>
        <el-table-column prop="typeCode"
                         sortable="custom"
                         align="center"
                         width="120"
                         label="演出类型">
          <template slot-scope="scope">
            <span>{{formatPlayType(scope.row.typeCode)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address"
                         sortable="custom"
                         align="center"
                         label="演出地点">
        </el-table-column>
        <el-table-column prop="time"
                         sortable="custom"
                         align="center"
                         width="150"
                         label="演出时间">
        </el-table-column>
        <el-table-column prop="lenth"
                         sortable="custom"
                         align="center"
                         width="140"
                         label="演出时长(分钟)">
        </el-table-column>
        <el-table-column align="center"
                         fixed="right"
                         width="180"
                         label="操作">
          <template slot-scope="scope">
            <el-button type="text"
                       @click="handleGetDetails(scope.row.id)">详情</el-button>
            <el-button type="text"
                       @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button type="text"
                       :disabled="!scope.row.videoUrl"
                       @click="handlePlay(scope.row)">在线播放</el-button>
            <!-- <el-button type="text"
                       @click="$router.push('add')">新增</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </main>
    <el-dialog :visible.sync="visible"
               destroy-on-close
               title="演出视频"
               width="700px">
      <div class="demo">
        <video-player class="video-player vjs-custom-skin"
                      ref="videoPlayer"
                      :playsinline="true"
                      :options="playerOptions">
        </video-player>
      </div>
    </el-dialog>
    <footer>
      <el-pagination background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="pagination.page"
                     :page-size="pagination.size"
                     :total="pagination.total"
                     :page-sizes="[10, 20, 30]"
                     layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </footer>
  </div>
</template>

<script>
import batchTag from './component/batchTag'
import API from '../../api/show'
import axios from 'axios'
const url = "https://javajeep123.oss-cn-beijing.aliyuncs.com/3bb6c83b-c7c0-4979-91dd-56afe7bf80d6.mp4"
export default {
  components: { batchTag },
  data() {
    return {
      loading: false,
      selections: [],
      searchText: '',
      visible: false,
      tableData: [],
      pagination: {
        page: 1,
        size: 10,
        total: 100
      },
      playerOptions: {
        // 播放速度
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        // 如果true,浏览器准备好时开始回放。
        autoplay: false,
        // 默认情况下将会消除任何音频。
        muted: false,
        // 导致视频一结束就重新开始。
        loop: false,
        // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        preload: 'auto',
        language: 'zh-CN',
        // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        aspectRatio: '16:9',
        // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        fluid: true,
        sources: [{
          // 类型
          type: "video/mp4",
          // url地址
          src: ''
        }],
        // 你的封面地址
        poster: '',
        // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          // 全屏按钮
          fullscreenToggle: true
        }
      },
      sortObj: {}
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    computeTableIndex(index) {
      return (this.pagination.page - 1) * this.pagination.size + index + 1
    },
    handleSort({ column, prop, order }) {
      if (prop === 'typeCode') prop = 'type'
      if (prop === 'time') prop = 'play_time'
      if (prop === 'lenth') prop = 'time_len'
      this.sortObj = {
        field: prop,
        sort: order && order.substr(0, order.length - 6) || ''
      }
      this.handleCurrentChange(1)
    },
    handleGetDetails(id) {
      this.$router.push({
        path: 'add',
        query: { id }
      })
    },
    formatPlayType(type) {
      switch (type) {
        case 1: {
          return '综合'
        }
        case 2: {
          return '春节团拜会'
        }
        case 3: {
          return '新年茶话会'
        }
        case 4: {
          return '新年戏曲晚会'
        }
        default: return type
      }
    },
    loadData() {
      const param = {
        pageSize: this.pagination.size,
        page: this.pagination.page,
        query: this.searchText,
        ...this.sortObj
      }
      this.loading = true
      API.getPlayList(param).then(res => {
        this.loading = false
        this.tableData = res.data && res.data.items || []
        this.pagination.total = res.data.total
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    handleIconClick() {
      console.log(1111)
    },
    handleSizeChange(v) {
      this.pagination.size = v
      this.loadData()
    },
    handleCurrentChange(v) {
      this.pagination.page = v
      this.loadData()
    },
    handleSelectionChange(array) {
      this.selections = array
    },
    handleDelete() {
      this.$confirm('删除所选项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.batchDelete()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    batchDelete() {
      const ids = this.selections.map((s) => s.id)
      API.batchDelete(ids.join(',')).then(() => {
        this.loadData()
      })
    },
    handleEdit(id) {
      this.$router.push({
        path: 'basic',
        query: { id }
      })
    },
    handleTemplateDownload() {
      window.open(process.env.VUE_APP_BASE_API + "excel/download")
    },
    handleImportClick() {
      this.$refs.file.value = ''
      this.$refs.file.click()
    },
    handleExportClick() {
      if (this.selections.length !== 1) {
        this.$message({
          message: '请选择一个演出记录导出！',
          type: 'warning'
        })
      } else {
        const base = process.env.VUE_APP_BASE_API + "/excel/exportExpertDataByIds/"
        const id = this.selections[0].id
        window.open(base + id)
        console.log(`export url ${base + id}`)
      }
    },
    handleFileChange(v) {
      // console.log(v)
      const form = new FormData()
      form.append('file', v.target.files[0])
      axios.post(process.env.VUE_APP_BASE_API + '/excel/importTemplateData', form).then(res => {
        if (res.data.code === 0) {
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }
        this.loadData()
      })
    },
    handlePlay(row) {
      this.visible = true
      this.playerOptions.sources[0].src = row.videoUrl || ''
      this.$nextTick(() => {
        const video = this.$refs.videoPlayer.player
        console.log(video)
        // video.currentTime(10);
        // video.play()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#show {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  header {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    .left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
  main {
    padding: 10px 0;
  }
  footer {
    text-align: right;
  }
  .form-item {
    width: calc((99% - 20px) / 2);
    float: left;
  }
  .demo {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 100px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
  }

  .demo:hover {
    // display: block;
  }

  /deep/ .table-header {
    padding: 0 6px;
  }
  /deep/ .el-table td,
  .el-table th {
    padding: 0;
  }
  /deep/ .el-table .cell,
  .el-table th div {
    padding: 6px 0;
  }
  /deep/ .el-dialog__body {
    padding: 10px 20px;
  }
}
</style>
